<template>
    <van-nav-bar coloe="#FFD700" title="订单申诉" left-text="返回" left-arrow @click-left="onClickLeft" />
   
    <div style="margin-top:10px;">
    <van-cell-group inset>
  <van-cell title="申诉描述" border="true" />
  <van-field 
    v-model="message"
    rows="10"
    autosize
    type="textarea"
    maxlength="200"
    placeholder="请描述相关内容"
    show-word-limit
    border="true"
    size="large"
  />
</van-cell-group>
</div>

<!-- 文件上传：用户上传申诉相关图片 -->
<div style="margin-top:10px;">
    <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead" 
    multiple :max-count="3" :max-size="500 * 1024" @oversize="onOversize"/>
</div>

<!-- 提交按钮 -->
<div style="margin-top:50px;" ref="container" >
  <van-sticky :container="container">
    <van-button  round type="primary" style="display:block;margin:0 auto" color="linear-gradient(to right, #ff6034, #ee0a24)">&nbsp;提 &nbsp;&nbsp; 交&nbsp;</van-button>
  </van-sticky>
</div>



</template>

<script setup>
import { Toast } from 'vant';
import { ref, reactive, onBeforeMount } from 'vue';
import http from "@/utils/request.js";

const active = ref(2);
const maxapeal = ref(0);
const apealList = reactive([

])

const getApealList = function () {
  http.get(
    '/order'
    ).then((res) => {//
    console.log("获取到的订单列表：", res.data);
    apealList.splice(0).forEach(apeal => {
      apealList.splice(0);//todo 需要将原有的元素清空
        res.data.data.apeal.forEach(apeal => {
          apealList.push(apeal);
        });
        maxapeal.value = res.data.data.max_apeal;
  })
})
}
getApealList();
const onClickLeft = () => history.back();
// 文件上传
const fileList = ref([
      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      { url: 'https://cloud-image', isImage: true },
    ]);
    // 文件上传大小
    const onOversize = (file) => {
      console.log(file);
      Toast('文件大小不能超过 500kb');
    };
    // 上传前置处理
    const beforeRead = (file) => {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
      return true;
    };
     // 返回 Promise
     const asyncBeforeRead = (file) => {
      return new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          reject();
        } else {
          const img = new File(['foo'], 'bar.jpg', {
            type: 'image/jpeg',
          });
          resolve(img);
        }
      });
    };
</script>